<template>
	<view class="wf_box">
		<view v-if="noData" class="noData f_36 tc_c flex_r_c_c">
			<text>木有数据呢~~(〃'▽'〃)</text>
		</view>
		<fr-waterfalls-flow v-if="waterfallsFlowVisible" ref="waterfallsFlow" :list="list" @wapper-lick="handleSelect" @image-click="previewImage">
			<!--  #ifdef  MP-WEIXIN -->
			<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
				<view class="cnt">
					<view class="title f_28 fw_600 tc_1 margin_b8 text_line_2">{{ item.title }}</view>
					<view class="text f_20 fw_400 tc_8">{{ item.text }}</view>
				</view>
			</view>
			<!--  #endif -->
		
			<!-- #ifndef  MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="cnt">
					<view class="title f_28 fw_600 tc_1 margin_b8 text_line_2">{{ item.title }}</view>
					<view class="text f_20 fw_400 tc_8">{{ item.text }}</view>
				</view>
			</template>
			<!-- #endif -->
		</fr-waterfalls-flow>
		<view v-if="noMore" class="noMore f_28 tc_c flex_r_c_c">
			<text>木有了呢~~(〃'▽'〃)</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						image_url: "https://cdn.pixabay.com/photo/2020/02/11/16/25/manarola-4840080_960_720.jpg",
						title: "梦幻沿海, 岩石上的古都",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码. 在人来人往的街头想起她, 她现在好吗? 可我没有能给你想要的回答, 可是你一定要幸福呀!",
					},
					{
						id: 2,
						image_url: "https://cdn.pixabay.com/photo/2020/09/25/16/50/portrait-5601950_960_720.jpg",
						title: "夏日街拍--怎样才能拍出日系清纯少女风",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码. 在人来人往的街头想起她, 她现在好吗?",
					},
					{
						id: 3,
						image_url: "https://cdn.pixabay.com/photo/2020/10/23/12/04/ortahisar-5678553_960_720.jpg",
						title: "沙漠遗迹--历史遗忘之都",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码.",
					},
					{
						id: 5,
						image_url: "https://cdn.pixabay.com/photo/2021/07/09/17/45/hydrangea-6399663_960_720.jpg",
						title: "海德拉之梦",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码. 在人来人往的街头想起她, 她现在好吗? 可我没有能给你想要的回答, 可是你一定要幸福呀!",
					},
					{
						id: 6,
						image_url: "https://cdn.pixabay.com/photo/2021/07/10/15/27/girl-6401688_960_720.jpg",
						title: "森林の赤敛姬--盘点摄影师根本部行早期摄影作品集",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码. 在人来人往的街头想起她, 她现在好吗?",
					},
					{
						id: 7,
						image_url: "https://cdn.pixabay.com/photo/2021/07/09/00/09/camera-6397987_960_720.jpg",
						title: "下一步旅行",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话.",
					},
					{
						id: 8,
						image_url: "https://cdn.pixabay.com/photo/2021/07/07/00/40/food-6392891_960_720.jpg",
						title: "瘦身轻食, 要这么吃早餐!",
						text: "可我没有能给你想要的回答, 可是你一定要幸福呀!",
					},
					{
						id: 9,
						image_url: "https://cdn.pixabay.com/photo/2021/07/09/14/11/gothic-6399156_960_720.jpg",
						title: "哥特风与暗黑系",
						text: "在人来人往的街头想起她, 她现在好吗?",
					},
					{
						id: 10,
						image_url: "https://cdn.pixabay.com/photo/2021/06/25/08/33/king-6363180_960_720.jpg",
						title: "维京之主--如何评价一人屠戮一城的日耳曼屠夫",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码. 在人来人往的街头想起她, 她现在好吗? 可我没有能给你想要的回答, 可是你一定要幸福呀!",
					},
					{
						id: 12,
						image_url: "https://cdn.pixabay.com/photo/2021/07/05/17/33/woman-6389661_960_720.jpg",
						title: "《紫罗兰酒庄》第一季细节深度解析",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码. 在人来人往的街头想起她, 她现在好吗?",
					},
					{
						id: 13,
						image_url: "https://cdn.pixabay.com/photo/2021/05/24/12/18/lighthouse-6278951_960_720.jpg",
						title: "彼岸的灯塔",
						text: "在人来人往的街头想起她, 她现在好吗? 可我没有能给你想要的回答, 可是你一定要幸福呀!",
					},
					{
						id: 14,
						image_url: "https://cdn.pixabay.com/photo/2021/07/09/10/07/four-great-beauties-6398775_960_720.jpg",
						title: "汉服打卡推荐, 最美的中国园林 | 汉服摄影",
						text: "在夜深人静的时候想起她, 送的那些花, 还说过一些撕心裂肺的情话, 赌一把幸福的筹码.",
					},
					{
						id: 15,
						image_url: "https://cdn.pixabay.com/photo/2021/06/27/07/31/fantasy-6367963_960_720.jpg",
						title: "深夜故事汇--一段渗入骨髓的恐惧",
						text: "可我没有能给你想要的回答, 可是你一定要幸福呀!",
					},
				],
				waterfallsFlowVisible: true,
				curPage: 1,
				lastPage: 1,
				total: 0,
				noMore: false,
				noData: false,
			};
		},
		onPullDownRefresh() {
			//显示顶部刷新图标
			uni.showNavigationBarLoading()
			//要刷新请求服务器的方法
			this.getData()
			//隐藏导航栏加载框
			uni.hideNavigationBarLoading()
			//停止下拉事件
			uni.stopPullDownRefresh()
		},
		onReachBottom(e) {
			this.curPage !== this.lastPage ? this.getData(true) : this.noMore = true
		},
		methods: {
			handleSelect(e) {
				this.$tool.printLog(e)
			},
			previewImage(e) {
				uni.previewImage({
					urls: [e.image_url]
				})
			},
			getData(isNextPage) {
				const _this = this
				_this.curPage = isNextPage? ++_this.curPage : 1
				_this.waterfallsFlowVisible = false // 注解_1
				
				// ......请求数据
				// 成功返回
				_this.waterfallsFlowVisible = true
				_this.noMore = false
				_this.curPage = res.current_page
				_this.lastPage = res.last_page
				_this.total = res.total
				_this.noData = res.data.length === 0 ? true: false
				_this.list = isNextPage ? [..._this.list, ...res.data] : res.data
				
				// _this.$refs.waterfallsFlow.refresh() // 注解_2
				
				/**
				 * 注解:
				 * 
				 * _this.$refs.waterfallsFlow.refresh() 用于组件更新数据后重置组件的高度, 但是发现并不好使
				 * 所以改用一下代码重置
				 * _this.waterfallsFlowVisible 用v-if来设置是否显示, 用以重置组件高度, 但是会稍微消耗性能
				 * 后期改造再处理
				 */
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.wf_box {
	padding: 28rpx;
	box-sizing: border-box;
	.cnt {
		padding: 12rpx;
		box-sizing: border-box;
	}
}
</style>
